<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin:0;
				padding:0;
			}
			#box{
				width:300px;
				height:300px;
				border:10px solid red;
				margin:20px auto;
				overflow: auto;
			}
			#box div{
				width:300px;
				height:200px;
			}
			#box div:nth-of-type(1){
				background: blue;
			}
			#box div:nth-of-type(2){
				background: chocolate;
			}
			#box div:nth-of-type(3){
				background: crimson;
			}
		</style>
		<script>
			window.onload = function(){
				var oBox = document.getElementById("box");
				oBox.onscroll = function(){
					console.dir(this);
					console.log(this.scrollTop);
					console.log(this.scrollLeft);
					
//					scrollHeight滚动内容实际高度
					console.log(this.scrollHeight);
					console.log(this.scrollWidth);	
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			<div>111</div>
			<div>222</div>
			<div>333</div>
		</div>
	</body>
</html>


















































